<template>
  <div>
    <h1>{{message}}</h1>
    <form @submit.prevent="postData">
      <input type="text" v-model="fruit" name="" id="">
      <button>添加</button>
    </form>
    <ul>
      <li v-for="(item,index) of fruitList" :key="index">
        {{item}}
        <button @click="del(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from "axios"


  export default{
    data(){
      return{
        message:"hello world",
        fruitList : [],
        fruit:""
      }
    },
    created(){
      this.getData()
    },
    methods:{
      getData(){
         axios.get("http://127.0.0.1:7001/fruits").then(res => {
        this.fruitList = res.data
      })
      },
      postData(){
        axios.post("http://127.0.0.1:7001/fruits",{
          fruit:this.fruit
        }).then(() => {
          this.getData();
          this.fruit = ""
        })
      },
      del(id){
        axios.delete(`http://127.0.0.1:7001/fruits/${id}`).then(() => {
          this.getData();
        })
      }
    }
  }
</script>

<style>

</style>
